<template>
  <div>
    <!-- 搜索 -->
    <smallsarch
      :hodertext="'请输入分类名'"
      :addtext="'添加分类'"
      :type="'Sort'"
      @changelist="getblogSort()"
      @tosearch="tosearch"
    ></smallsarch>
    <el-table
      ref="multipleTable"
      :data="sortlist"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="55" label="序号"> </el-table-column>
      <el-table-column
        label="分类"
        width="140"
        prop="sortName"
      ></el-table-column>
      <el-table-column
        label="分类介绍"
        width="140"
        prop="content"
      ></el-table-column>
      <el-table-column
        label="点击数"
        width="100"
        prop="clickCount"
      ></el-table-column>
      <el-table-column label="排序" width="100">
        <template slot-scope="scope"
          ><el-tag type="warning">{{ scope.row.sort }}</el-tag></template
        >
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="200"
        prop="createTime"
      ></el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">{{
          scope.row.status ? "正常" : "异常"
        }}</template>
      </el-table-column>
      <el-table-column label="操作" v-slot="scope" width="300">
        <caozuobox
          :uid="scope.row.uid"
          :type="'sort'"
          @changelist="getblogSort()"
        ></caozuobox>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryform.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryform.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getblogSort } from "@/api/blog.js";
import caozuobox from "@/components/caozuo.vue";
import smallsarch from "@/components/smallSearch.vue";
export default {
  name: "blogSort",

  components: { caozuobox, smallsarch },
  data() {
    return {
      sortlist: [],
      total: 0,
      queryform: {
        content: "",
        currentPage: 0,
        keyword: "",
        pageSize: 10,
        sort: 0,
        sortName: "",
        status: 0,
        uid: "",
      },
      multipleSelection: [],
    };
  },
  created() {
    this.getblogSort();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async getblogSort() {
      try {
        const { data: res } = await getblogSort(this.queryform);
        console.log(res);
        this.sortlist = res.data.records;
        console.log(this.sortlist);
        this.total = res.data.total;
      } catch (error) {
        console.log(error);
      }
    },
    tosearch(val) {
      this.queryform.keyword = val;
      this.getblogSort();
    },
    handleSizeChange(val) {
      this.queryform.pageSize = val;
      this.getblogSort();
    },
    handleCurrentChange(val) {
      this.queryform.currentPage = val;
      this.getblogSort();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
}
</style>
